<template>
	<uni-transition mode-class="fade" :show="isMsgMenuShow">
		<view class="message-menu" :style="{'width':isSender?menuItemList.length*100+40+'rpx':(menuItemList.length-1)*100+40+'rpx'}">
			<view class="message-menu-item"
				v-for="item,index in menuItemList" :key="index"
				@click="$emit(item.value)" v-if="item.value == 'withdraw'?isSender:true">
				<view class="item-icon">
					<i class="iconfont" v-html="item.icon"></i>
				</view>
				<view class="item-name">
					{{item.label}}
				</view>
			</view>
		</view>
	</uni-transition>
</template>

<script>
	export default {
		props: {
			isMsgMenuShow: {
				type: Boolean,
				default: false
			},
			msgType: {
				type: String,
			},
			isSender:{
				type:Boolean,
			}
		},
		computed:{
			menuItemList(){
				return  this.menuOptions.filter(i=>i.permissions.indexOf(this.msgType) != -1);
			}
		},
		data() {
			return {
				menuOptions: [{
						label: '转发',
						value: 'share',
						icon:'&#xe61d;',
						permissions: ['image', 'video', 'file']
					},
					{
						label: '收藏',
						value: 'collect',
						icon:'&#xe61f;',
						permissions: ['image', 'video', 'file']
					},
					{
						label: '保存',
						value: 'save',
						icon:'&#xe61c;',
						permissions: ['image', 'video', 'file']
					},
					{
						label: '复制',
						value: 'copy',
						icon:'&#xe620;',
						permissions: ['text']
					},
					{
						label: '撤回',
						value: 'withdraw',
						icon:'&#xe61e;',
						permissions: ['text', 'image', 'video', 'file', 'location', 'voice']
					},
				]
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./messageMenu.scss";
</style>
